<template>
  <div>
    <h1>财务管理</h1>
    <!--  -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="SelectZhichuId()" size="small">查询搜索</el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >重置</el-button>
        
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label>
            <el-select checked v-model="formInline.region" placeholder="搜索类型">
              <el-option label="查询编号" value="查询编号"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索内容">
            <el-input v-model="formInline.user" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <i class="el-icon-delete-solid myIcon" @click="huishouzhan"></i>
      <div id="hui">点击打开回收站</div>
    </el-card>
    <!--  -->

    <div class="tab">
      <el-table :data="currentData" border style="width: 100%">
        <el-table-column prop="id" label="编号" ></el-table-column>
        <el-table-column prop="collectionUnit" label="收款单位" ></el-table-column>
        <el-table-column prop="payBy" label="出纳" ></el-table-column>
        <el-table-column prop="payReason" label="支出事由" ></el-table-column>
        <el-table-column prop="price" label="金额" ></el-table-column>
        <el-table-column prop="time" label="支出时间" :formatter="dateFormatter" ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  -->
    <!--  -->
    <div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="this.pageNum"
        :page-size="this.pageSize"
        :pager-count="this.pageCount"
        @current-change="changePage"
        :current-page="currentPage"
        class="fen"
      ></el-pagination>
    </div>
    <!-- Dialog -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="编号：" prop="id">
          <el-input v-model="ruleForm.id"></el-input>
        </el-form-item>
        <el-form-item label="收款单位：" prop="collectionUnit">
          <el-input v-model="ruleForm.collectionUnit"></el-input>
        </el-form-item>
        <el-form-item label="出纳：" prop="payBy">
          <el-input v-model="ruleForm.payBy"></el-input>
        </el-form-item>
        <el-form-item label="支出事由：" prop="payReason">
          <el-input v-model="ruleForm.payReason"></el-input>
        </el-form-item>
        <el-form-item label="金额：" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="更新人：" prop="updateBy">
          <el-input v-model="ruleForm.updateBy" disabled></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--  -->
<!-- -------------------------------------------------------------- -->
<el-dialog title="回收站" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="id" label="编号" width="150"></el-table-column>
    <el-table-column property="collectionUnit" label="收款单位" width="150"></el-table-column>
    <el-table-column property="payBy" label="出纳" width="150"></el-table-column>
    <el-table-column property="price" label="金额" width="150"></el-table-column>
    <el-table-column label="操作" width="230%">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit2(scope.$index, scope.row)">恢复数据</el-button>
          <el-button size="mini" type="danger" @click="handleDelete2(scope.$index, scope.row)">彻底删除</el-button>
        </template>
    </el-table-column>
  </el-table>
</el-dialog>
<!-- -------------------------------------------------------------- -->
    <!--  -->
  </div>
</template>
<script>
import { mapActions } from "vuex";
import http from "../../http/http";
export default {
  name: "financial",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageCount: 7,

      formInline: {
        user: "",
        region: ""
      },
      tableData: [],
      input: "",
      // Dialog对话框
      dialogVisible: false,
      // 编辑表单
      ruleForm: {
        id: "",
        collectionUnit: "",
        payBy: "",
        payReason: "",
        price: "",
        time: "",
        updateBy: ""
      },
      rules: {
        name: [
          { required: false, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        storeName: [
          { required: false, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ]
      },
      gridData: [],
        dialogTableVisible: false,
        formLabelWidth: '120px'
    };
    
  },
  computed: {         //------------------------------分页计算属性
    currentData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      return this.$store.state.ljnStore.tableData.slice(start, end);
    },
    pageNum() {
      return this.$store.state.ljnStore.tableData.length;
    },
    
  },
  methods: {
    ...mapActions(["mmm"]),
    // 搜索按钮
    SelectZhichuId() {      //------------------------------查询支出函数
      let user = this.formInline.user;
      let region = this.formInline.region;
      // console.log(user)
      // console.log(region)
      if (user != "" && region != "") {
        http({
          url: "/mgrsite/Account/selectPayprice",
          method: "post",
          data: {
            inputValue: this.formInline.user
          }
        }).then(res => {
          console.log(res.data);
          this.$store.state.ljnStore.tableData = res.data;
        });
      } else {
        this.$confirm("您的查询内容为空！请重新检查后再输入！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
      }
    },
    huishouzhan(){   //------------------------------点击打开回收站的dialog
      this.dialogTableVisible = true
      http({
        url:'/mgrsite/Account/selectFalseDeletion',
        method:'post',
        data:{}
      }).then(res =>{
        // console.log(res)
        this.gridData = res.data
      })
    },
    //------------------------------重置搜索按钮
    handleResetSearch() {
      this.formInline.user = "";
      this.formInline.region = "";
      this.mmm();
    },
    //------------------------------ 编辑员工
    handleEdit(index, row) {
      this.dialogVisible = true;
      for (let key in this.currentData[index]) {
        this.ruleForm[key] = this.currentData[index][key];
      }
      this.ruleForm.updateBy = this.$store.state.ljnStore.user.name;
    },
    //------------------------------恢复数据按钮
    handleEdit2(index, row) {
      http({
        url:'/mgrsite/Account/updaterecoveryPayprice',
        method:'post',
        data:{
          "id": row.id,
        }
      }).then(res =>{
        // console.log(res)
        this.mmm();
        this.huishouzhan()
      })
    },
   //------------------------------彻底删除的按钮
    handleDelete2(index, row) {
      http({
        url:'/mgrsite/Account/deleteFalseDeletion',
        method:'post',
        data:{
          "id": row.id,
        }
      }).then(res =>{
        this.mmm();
        this.huishouzhan()
      })
    },
    //------------------------------ 关闭Dialog
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //------------------------------ 编辑提交事件
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // let storeName = this.$refs["myCascader"].checkedValue[0];
          // let jobName = this.$refs["myCascader"].inputValue;
          // console.log(jobName, storeName);
          http({
            url: "/mgrsite/Account/updatePayprice",
            method: "post",
            data: {
              collectionUnit: this.ruleForm.collectionUnit,
              delFlag: false,
              id: this.ruleForm.id,
              payBy: this.ruleForm.payBy,
              payReason: this.ruleForm.payReason,
              price: this.ruleForm.price,
              time: this.ruleForm.time
            }
          })
            .then(res => {
              this.mmm();
            })
            .then(res => {
              this.dialogVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {//------------------------------dialog的重置按钮
      this.$refs[formName].resetFields();
    },
    //------------------------------ 添加员工
    addyg() {
      console.log("弹出模态框");
    },
    changePage(val) {   //------------------------------分页
      this.currentPage = val;
    },
    handleDelete(index, row) {//------------------------------删除按钮
      http({
        url: "/mgrsite/Account/deletePayprice",
        method: "post",
        data: {
          id: row.id
        }
      }).then(res => {
        this.mmm();
      });

      // 获取id  将id发送服务器  删除数据库中的与id相符合的数据
      // if(删除成功){
      //  arr代表的是 后端讲删除成功后有所数据返回给我
      //   this.tableData = arr
      // }
      //---------
      // let id = row.id
      // console.log(this.currentData);
      // console.log(id);
      // let arr = this.currentData.filter((item)=>{
      //     return !(item.id === id)
      // })
      // this.currentData = arr
      //---------
      // console.log(this.tableData)
    },
    changPage(val) {
      this.currentPage = val;
    },
    dateFormatter(row, column) {       //------------------------------fromatter的处理时间方法
      let datetime = row.time;
      if (datetime) {
        datetime = new Date(datetime);
        let y = datetime.getFullYear() + "-";
        let mon = datetime.getMonth() + 1 + "-";
        let d = datetime.getDate();
        return y + mon + d;
      }
      return "";
    },
  },
  created() {
    this.mmm();
  }
};
</script>
<style lang="less" scoped>
.tab {
  margin-top: 15px;
}
.center {
  text-align: center !important;
}
.fen {
  margin-top: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.myIcon{
  position: absolute;
  right: 13%;
  top: 18%;
  font-size: 80px;
  transition: 0.5s;
  cursor: pointer;
}
#hui{
  position: absolute;
  opacity: 0;
  right: 13%;
  top: 27%;
  font-size: 12px;
  transition: 0.5s;
  cursor: pointer;
}
#hui:hover {
  color: #409EFF;
  opacity: 1;
}
.myIcon:hover{
  color: #409EFF;
}

</style>